<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.talk_con {
	width: 600px;
	height: 500px;
	border: 1px solid #666;
	margin: 50px auto 0;
	background: #f9f9f9;
}

.talk_show {
	width: 580px;
	height: 420px;
	border: 1px solid #666;
	background: #fff;
	margin: 10px auto 0;
	overflow: auto;
}

.talk_input {
	width: 580px;
	margin: 10px auto 0;
}

.whotalk {
	display: none;
	width: 80px;
	height: 30px;
	float: left;
	outline: none;
}

.talk_word {
	width: 420px;
	height: 26px;
	padding: 0px;
	float: left;
	margin-left: 10px;
	outline: none;
	text-indent: 10px;
}

.talk_sub {
	width: 56px;
	height: 30px;
	float: left;
	margin-left: 10px;
}

.atalk {
	margin: 10px;
}

.atalk span {
	display: inline-block;
	background: #0181cc;
	border-radius: 10px;
	color: #fff;
	padding: 5px 10px;
}

.btalk {
	margin: 10px;
	text-align: right;
}

.btalk span {
	display: inline-block;
	background: #ef8201;
	border-radius: 10px;
	color: #fff;
	padding: 5px 10px;
}
</style>
<script type="text/javascript" src="../lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	//
	window.onload = function() {
		var Words = document.getElementById("words");
		var Who = document.getElementById("who");
		var TalkWords = document.getElementById("talkwords");
		var TalkSub = document.getElementById("talksub");

		$("body").keyup(function() {
			if (event.keyCode == "13") {//keyCode=13是回车键
				TalkSub.click();
			}
		});

		TalkSub.onclick = function() {
			//定义空字符串
			var str = "";
			var str1 = "";
			var str2 = TalkWords.value;
			if (TalkWords.value == "") {
				// 消息为空时弹窗
				alert("消息不能为空");
				return;
			}
			;

			str = '<div class="btalk"><span>我说 :' + str2 + '</span></div>';
			Words.innerHTML = Words.innerHTML + str;
			$("#talkwords").val("");
			$.ajax({
				type : "POST",
				contentType : "application/json; charset=utf-8",
				processData : false,
				url : "/nlp/robot/answer",
				dataType : "json",
				data : JSON.stringify({
					"query" : str2
				}),
				async : true,
				cache : false,
				error : function(request) {
					alert("there was an error");
				},
				success : function(data) {
					str1 = '<div class="atalk"><span>机器人说 :'
							+ data.result.response_list[0].action_list[0].say
							+ '</span></div>';
					Words.innerHTML = Words.innerHTML + str1;
					$("#words").scrollTop($("#words")[0].scrollHeight);
				}
			});

			$("#words").scrollTop($("#words")[0].scrollHeight);
		}

	}
</script>
</head>
<body>
	<div class="talk_con">
		<div class="talk_show" id="words">
			<!-- <div class="atalk">
				<span id="asay"></span>
			</div>
			<div class="btalk">
				<span id="bsay"></span>
			</div> -->
		</div>
		<div class="talk_input">
			<select class="whotalk" id="who">
				<!--<option value="0">A说：</option>-->
				<option value="1">B说：</option>
			</select> <input type="text" class="talk_word" id="talkwords"> <input
				type="button" value="发送" class="talk_sub" id="talksub">
		</div>
	</div>
</body>
</html>
